<form method="post">
    <div style="margin: 10px 20px 30px 0px">
        {#  csrf_token的本质作用就是混淆发送给后端的参数#}
        {{form.csrf_token}}
    主机名：{{form.tag_id}}
         ip地址：{{form.ip}}
    {{form.submit}}
</div>
</form>
    <script>
    function selected() {
    var obj = document.getElementById("tag_id"); //定位id
    var index = obj.selectedIndex; // 选中索引
    var text = obj.options[index].text; // 选中文本
    var value = obj.options[index].value; // 选中值
    document.getElementById("ip").value=value;
    document.cookie="ip="+value
    document.cookie="host="+text
    tablespace(text,value)
}
    </script>
 <div id="container" style="height: 400px; min-width: 310px"></div>
 <div id="sliders"  style="display: none;margin: 10px 20px 30px 0px">
            <table>
                <tr>
                    <td>α 角（内旋转角）</td>
                    <td><input id="alpha" type="range" min="0" max="45" value="0"/> <span id="alpha-value" class="value"></span></td>
                </tr>
                <tr>
                    <td>β 角（外旋转角）</td>
                    <td><input id="beta" type="range" min="-45" max="45" value="0"/> <span id="beta-value" class="value"></span></td>
                </tr>
                <tr>
                    <td>深度</td>
                    <td><input id="depth" type="range" min="20" max="100" value="100"/> <span id="depth-value" class="value"></span></td>
                </tr>
            </table>
        </div>
    <script>
//获取后台数据
  function tablespace(host,ip) {

      $.getJSON('/tablespace', function (data) {
          var data1 = new Array()
          var data2 =  new Array()
          var series= new Array();
          for (var i=0; i< data.length;i++){
              data1.push(data[i][0])
              data2.push(data[i][1])
              series.push({"name": data1[i],"data":[data2[i]]})
          }
          var chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'container',
                  type: 'column',
                  options3d: {
                      enabled: true,
                      alpha: 0,
                      beta: 0,
                      depth: 100,
                      viewDistance: 0
                  }
              },
              title: {
                  text:'可用表空间大小(G)'
              },
              subtitle: {
                  text: host+'/'+ip,
                  style:{
                      color:'#00CED1'
                  }
              },
              xAxis: {
                    title: {text: '表空间'},
                    categories:data1[2],
                    labels: {
                    enabled: false
                            }
                        },
                 yAxis: {
                     title: {
                                  text: ''
                     },
                     style:{
                         color:'#00CED1'
                     }
                          },
              tooltip: {//当鼠标悬置数据点时的提示框
                formatter: function () { //格式化提示信息
                    return '<span style="color: '+ this.series.color + '">\u25CF</span> '+
                     this.series.name+': <b>'+'可用大小：'+ Highcharts.numberFormat(this.y, 2) +'G'+'</b><br/>'
                }
            },
              plotOptions: {
                  column: {
                      depth: 25
                  }
              },
              series: series
          });

// 将当前角度信息同步到 DOM 中
          var alphaValue = document.getElementById('alpha-value'),
                  betaValue = document.getElementById('beta-value'),
                  depthValue = document.getElementById('depth-value');

          function showValues() {
              alphaValue.innerHTML = chart.options.chart.options3d.alpha;
              betaValue.innerHTML = chart.options.chart.options3d.beta;
              depthValue.innerHTML = chart.options.chart.options3d.depth;
          }

// 监听 sliders 的变化并更新图表
          $('#sliders input').on('input change', function () {
              chart.options.chart.options3d[this.id] = this.value;
              showValues();
              chart.redraw(false);
          });
         showValues();
         document.getElementById("sliders").style.display=''; 
      })
  }
</script>